<template>
    <div>
        <h2 class="h2"><span>基本信息</span></h2>
        <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm basic" id="basic" accept-charset="UTF-8">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="姓名：" prop="A003">
                            <el-input v-model="ruleForm.A003" id="A003" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                         <el-form-item label="性别：" prop="A004">
                            <el-radio-group v-model="ruleForm.A004">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                       <el-form-item label="民族：" prop="A005">
                            <el-input v-model="ruleForm.A005" id="A005" placeholder="请输入民族"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="身份证号码：" prop="A006">
                            <el-input v-model="ruleForm.A006" id="A006" placeholder="身份证号码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <!-- <el-col :span="12">
                        <el-form-item class="select2" label="文化程度" prop="A010">
                            <el-select v-model="ruleForm.A010" placeholder="请选择文化程度">
                                <el-option label="博士" value="1"></el-option>
                                <el-option label="硕士" value="2"></el-option>
                                <el-option label="大学本科" value="3"></el-option>
                                <el-option label="大学专科" value="4"></el-option>
                                <el-option label="中专（中技）" value="5"></el-option>
                                <el-option label="高中" value="6"></el-option>
                                <el-option label="初中及以下" value="7"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="12">
                        <el-form-item class="select2" label="与烈士关系" prop="A016">
                            <el-select v-model="ruleForm.A016" placeholder="请选择与烈士关系">
                                <el-option label="父母(抚养人)" value="1"></el-option>
                                <el-option label="配偶" value="2"></el-option>
                                <el-option label="子女" value="3"></el-option>
                                <el-option label="兄弟姐妹" value="4"></el-option>
                            </el-select>      
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="出生日期：" prop="DateBirth">
                            <el-date-picker v-model="ruleForm.DateBirth" type="date" placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20" class="sanjiliandong">
                    <el-form-item label="户籍所在地：">
                        <linkage @hujisuozaidifn="hujisuozaidifnsss"></linkage>
                    </el-form-item>
                </el-row>
                <el-row :gutter="20" class="sanjiliandong">
                    <el-form-item label="现家庭住址：">
                        <linkage @hujisuozaidifn="hujisuozaidifnsss2"></linkage>
                    </el-form-item>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="详细住址：" prop="xiangxizhuzhi">
                            <el-input v-model="ruleForm.xiangxizhuzhi" id="xiangxizhuzhi" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                         <el-form-item label="电话号码：" prop="A011">
                            <el-input v-model="ruleForm.A011" id="A011" placeholder="请输入电话号码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item class="select2" label="婚姻状况：" prop="A012">
                            <el-select v-model="ruleForm.A012" placeholder="婚姻状况">
                                <el-option label="未婚" value="1"></el-option>
                                <el-option label="已婚" value="2"></el-option>
                                <el-option label="离婚" value="3"></el-option>
                                <el-option label="丧偶" value="4"></el-option>
                            </el-select>         
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                         <el-form-item class="select2" label="政治面貌：" prop="A013">
                            <el-select v-model="ruleForm.A013" placeholder="政治面貌">
                                <el-option label="中共党员" value="1"></el-option>
                                <el-option label="民主党员" value="2"></el-option>
                                <el-option label="共青团员" value="3"></el-option>
                                <el-option label="群众" value="4"></el-option>
                            </el-select>               
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <!-- <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="民主党派名称：">
                            <el-input v-model="ruleForm.A014" id="A014" placeholder="民主党派名称（如有则填）"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row> -->
                <el-row>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
    </div>
</template>

<script>
import linkage from '@/components/element/linkage'
export default {
    data(){
        // const validate1 = (rule, value, callback) => {
        //     console.log(rule)
        //     console.log(value)
        //     console.log(callback)
        //     console.log(this.hujisuozaidiData)
        //     // if (this.hujisuozaidiData) {
        //     //     callback()
        //     // }else{
        //     //     callback(new Error('请选择列表中已有的选项'))
        //     // }
        // }
        return {
            ruleForm: { //默认数据
                A003: '程翔',//姓名
                A005:'汉',//民族
                A006:'420583199504280016',//身份证号
                DateBirth:'', //出生日期
                xiangxizhuzhi:'万润家园',//详细地址
                A011:'15871677257',
                A010:'',//文化程度
                A012:'', //婚姻状况
                A013:'',//政治面貌
                A014:'',//民主党派名称
                A016:'',//与烈士关系
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                A004: '男', //选择性别
                desc: ''
            },
            rules: {  //规则
                A003: [ //姓名
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                A005:[
                    { required: true, message: '请填写民族', trigger: 'blur' },
                ],
                A006:[ //身份证号
                    {required: true, message: '请填写证件号码', trigger: 'blur' },
                    {pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '证件号码格式有误！', trigger: 'blur'}
                ],
                hujisuozaidi: [ //户籍所在地
                   { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                DateBirth: [ //出生日期
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                A010:[
                    { required: true, message: '请选择文化程度', trigger: 'change' }
                ],
                A011:[  //请填写手机号码
                    { required: true, message: '请填写手机号码', trigger: 'blur' },
                ],
                A012:[
                    { required: true, message: '请填写婚姻状况', trigger: 'blur' },
                ],
                A013:[
                    { required: true, message: '请填写政治面貌', trigger: 'blur' },
                ],
                A016:[
                    { required: true, message: '请填写与烈士关系', trigger: 'blur' }, 
                ],
                xiangxizhuzhi:[ //详细地址
                    { required: true, message: '请填写地址', trigger: 'blur' },
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                A004: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            hujisuozaidiData:''//户籍所在地
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    console.log(this.ruleForm)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        hujisuozaidifnsss(value){
            console.log(value)
            this.hujisuozaidiData = value
        },
        hujisuozaidifnsss2(value){
            console.log(value)
        }
    },
    components:{
        linkage,
    }
}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}
.el-row:last-child {
    margin-bottom: 0;
}
</style>